/*
 * @Author: hongbin
 * @Date: 2022-11-03 22:09:22
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-25 11:36:26
 * @Description:注册表单
 */
import { FC, useCallback, useState } from "react";
import styled, { css } from "styled-components";
import { get, post } from "../../api";
import { useAuth } from "../../context/AuthProvide";
import { useRegisterForm } from "../../hook/useRegisterForm";
import { showMessage } from "../../HUI/MessageBar";
import { FlexDiv } from "../../styled";
import { closePlaneRef } from "../HeadPortrait";
import { Button, Input } from "./Login";

interface IProps {
    toggleLogin: () => void;
}

const Register: FC<IProps> = ({ toggleLogin }) => {
    const { recordUserInformation } = useAuth();
    const [form, setForm] = useRegisterForm();
    const [passwordAgreement, setPasswordAgreement] = useState(true);
    const [userNameRepeat, setUserNameRepeat] = useState(false);

    const register = async () => {
        if (!passwordAgreement || userNameRepeat) return;
        const info = { ...form, friendsList: [] };
        const { data, code } = await post<{ data: string; code: number }>("/Auth/register", info);
        if (!code) {
            showMessage("注册成功");
            recordUserInformation({ ...info, _id: data });
            closePlaneRef.current?.setShow(false);
            get("/PartsConfig/init?id=" + data);
        } else {
            showMessage("注册失败-昵称重复");
            setUserNameRepeat(true);
        }
    };

    /**
     * 检查用户名是否重复
     */
    const repeatName = useCallback(async (name: string) => {
        const { data } = await get(`/Auth/queryUserByName?name=${name}`);
        console.log(data);
        setUserNameRepeat(data.length);
    }, []);

    return (
        <Container>
            <Input
                title="昵称"
                inputErr={userNameRepeat}
                onBlur={() => repeatName(form.name)}
                value={form.name}
                setValue={setForm("name")}
                errorInfo="昵称重复"
            />
            <Input title="密码" type="password" value={form.password} setValue={setForm("password")} />
            <Input
                title="确认密码"
                type="password"
                value={form.conformPassword}
                setValue={setForm("conformPassword")}
                onBlur={() => setPasswordAgreement(form.password == form.conformPassword)}
                inputErr={!passwordAgreement}
                errorInfo="两次输入不一致"
            />
            <Input title="年龄" type="number" value={form.age} setValue={setForm("age")} />
            <FlexDiv
                column
                css={css`
                    span {
                        color: #fff;
                        font-size: 1vw;
                    }
                    margin-bottom: 1vh;
                `}
            >
                <span>性别</span>
                <FlexDiv css={"margin-top: 1vh"}>
                    <input checked={form.sex === "男"} onChange={() => setForm("sex")("男")} type="checkbox" />
                    <span>男</span>
                    <input checked={form.sex === "女"} onChange={() => setForm("sex")("女")} type="checkbox" />
                    <span>女</span>
                </FlexDiv>
            </FlexDiv>
            <Input title="学院" value={form.college} setValue={setForm("college")} />
            <Input title="专业" value={form.major} setValue={setForm("major")} />
            <Input title="兴趣" value={form.interest} setValue={setForm("interest")} />
            <Input title="交友格言" value={form.statement} setValue={setForm("statement")} />
            <Button onClick={register}>注册</Button>
            <Button bg="transparent" color="#2c068d" fontSize="0.7em" onClick={toggleLogin}>
                切换登录
            </Button>
        </Container>
    );
};

export default Register;

const Container = styled.div`
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2vh 1vw;
`;
